import type { TourProps } from 'antd'
import { Tour } from 'antd'
import React, { Dispatch, SetStateAction } from 'react'

type StepFormInfo = {
  open: boolean
  tabList: string[]
  forms: React.ReactNode[]
  current: number
  onChange?: (current: number) => void
  onClose: () => void
  onFinish: () => void
  setOpen: Dispatch<SetStateAction<boolean>>
}

const Index: React.FC<StepFormInfo> = (props: StepFormInfo) => {
  const { open, tabList, forms, current, onChange, onClose, onFinish, setOpen } = props
  const steps: TourProps['steps'] = tabList.map((tab, i) => {
    return {
      title: tab,
      description: forms[i],
      placement: 'top',
      target: () => null,
      onClose: () => {
        onClose()
        setOpen(false)
      },
      nextButtonProps: {
        children: i === tabList.length - 1 ? '完成' : '下一步'
      }
    }
  })
  return (
    <>
      <Tour
        open={open}
        mask={false}
        steps={steps}
        arrow={false}
        current={current}
        onChange={onChange}
        onFinish={onFinish}
      />
    </>
  )
}

export default Index
